<template>
  <el-dialog :title="`事件详情`" :visible="show" :before-close="close">
    <div class="content">
      <div class="baseinfo">
        <el-descriptions title="" :column="1" border>
          <el-descriptions-item label="问题编号">{{detail.code}}</el-descriptions-item>
          <el-descriptions-item label="问题类型">{{detail.typeName}}</el-descriptions-item>
          <el-descriptions-item label="问题描述">{{detail.content||'--'}}</el-descriptions-item>
          <el-descriptions-item label="发现时间">{{detail.gmtCreate}}</el-descriptions-item>
          <el-descriptions-item label="发现地址">{{detail.address||'--'}}</el-descriptions-item>
          <el-descriptions-item label="发现车辆">{{detail.deviceName}}</el-descriptions-item>
          <el-descriptions-item label="骑行人员">{{detail.memberName}}</el-descriptions-item>
          <el-descriptions-item label="报警设备">{{detail.handLabel||'--'}}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="media">
        <ImagePreviews :src="detail.pic" :width="380" :height="150"></ImagePreviews>
        <video :src="videoUrl" style="width: 380px;height: 170px;border-radius: 10px;" controls></video>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import ImagePreviews from '@/components/ImagePreviews/preview.vue'
export default {
    components: {ImagePreviews},
  props: {
    detail: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      show: true,
    };
  },
  computed: {
    videoUrl() {
        return window.$setting.baseImgUrl + this.detail.video
    }
  },
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  display: flex;
  .baseinfo {
    flex: 1;
  }
  .media {
    flex:0 0 400px;
    margin-left: 10px;
  }
}
</style>